<template>
  <div class="NotForSaleEdit">
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>基础信息</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div>
          <div class="star">款式编码(货号)：</div>
          <el-input
            v-model="form.type_no"
            placeholder="请输入款式编码(货号)"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div class="star">供应商：</div>
          <el-select
            style="width: 400px"
            v-model="form.supplier_id"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in factoryList"
              :key="item.supplier_id"
              :label="item.factory_name"
              :value="item.supplier_id"
            ></el-option>
          </el-select>
        </div>
        <div>
          <div class="star">商品名称：</div>
          <el-input
            v-model="form.type_name"
            placeholder="请输入商品名称"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>品牌：</div>
          <el-input
            v-model="form.brand"
            placeholder="请输入品牌"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>商品属性：</div>
          <div style="width: 400px">
            <el-radio-group v-model="form.attribute">
              <el-radio label="成品"></el-radio>
              <el-radio label="半成品"></el-radio>
              <el-radio label="原材料"></el-radio>
              <el-radio label="包材"></el-radio>
            </el-radio-group>
          </div>
        </div>
        <div>
          <div>商品分类：</div>
          <el-input
            v-model="form.classification"
            placeholder="请输入商品分类"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>SKU编码：</div>
          <el-input
            v-model="form.size_code"
            placeholder="多SKU请用逗号（,）隔开"
            size="normal"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="NotForSaleEdit-two borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>体积重量信息</div>
      </div>
      <div class="NotForSaleEdit-two-content">
        <div>
          <div>长宽高(cm):</div>
          <div>
            <el-input
              @input="onInput"
              type="number"
              style="width: 100px"
              v-model="form.long"
              placeholder="长度"
              size="normal"
              clearable
            ></el-input>
            <el-input
              @input="onInput"
              type="number"
              style="width: 100px; margin: 0 20px"
              v-model="form.wide"
              placeholder="宽度"
              size="normal"
              clearable
            ></el-input>
            <el-input
              @input="onInput"
              type="number"
              style="width: 100px"
              v-model="form.high"
              placeholder="高度"
              size="normal"
              clearable
            ></el-input>
          </div>
        </div>
        <div>
          <div>体积(cm³)：</div>
          <div>{{ form.volume }}</div>
        </div>
        <div>
          <div>重量(kg)：</div>
          <el-input
            type="number"
            v-model="form.weight"
            placeholder="请输入重量"
            size="normal"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>价格信息/元</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div>
          <div>市场吊牌价：</div>
          <el-input
            type="number"
            v-model="form.market_price"
            placeholder="请输入市场吊牌价"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>基本售价：</div>
          <el-input
            type="number"
            v-model="form.basic_price"
            placeholder="请输入基本售价"
            size="normal"
            clearable
          ></el-input>
        </div>
        <div>
          <div>成本价(采购价)：</div>
          <el-input
            type="number"
            v-model="form.cost_price"
            placeholder="请输入成本价(采购价)"
            size="normal"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>其他信息</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div>
          <div>备注说明：</div>
          <el-input
            type="textarea"
            v-model="form.remarks"
            placeholder="请输入备注说明"
            size="normal"
            style="width: 400px"
            clearable
          ></el-input>
        </div>
        <div>
          <div>商品图片：</div>
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="filelist"
            ref="uploadimage"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </div>
    </div>
    <div>
      <el-button type="primary" size="default" @click="onSave">保 存</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  postHomeCodeGetFactory,
  uploadHomeApiupload,
  postAdminOperateSaveOrtherProduct,
  postAdminOperateLookOrtherProduct,
} from "@/api";
export default {
  data() {
    return {
      value: "",
      factoryList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      filelist: [],
      form: {
        type_no: "",
        type_name: "",
        size_code: "",
        image: "",
        brand: "",
        attribute: "",
        classification: "",
        supplier_id: "",
        long: "",
        wide: "",
        high: "",
        volume: "",
        weight: "",
        market_price: "",
        basic_price: "",
        cost_price: "",
        remarks: "",
      },
    };
  },
  async mounted() {
    postAdminOperateLookOrtherProduct;
    if (this.$route.query.id) {
      this.postAdminOperateLookOrtherProduct(this.$route.query.id);
    }
    this.postHomeCodeGetFactory();
  },
  methods: {
    async postAdminOperateLookOrtherProduct(id) {
      let obj = {
        id,
      };
      let res = await postAdminOperateLookOrtherProduct(obj);
      let data = res.data;
      if (data.image && data.image.length) {
        let arr = data.image.map((e) => {
          return {
            url: e,
          };
        });
        this.filelist = arr;
      }
      if(data.size_code && data.size_code.length){
         data.size_code = data.size_code.toString()
      }else{
          data.size_code = ""
      }
      let formobj = {
        id: data.id,
        type_no: data.type_no,
        type_name: data.type_name,
        size_code: data.size_code,
        image: "",
        brand: data.brand,
        attribute: data.attribute,
        classification: data.classification,
        supplier_id: data.supplier_id,
        long: data.long,
        wide: data.wide,
        high: data.high,
        volume: data.volume,
        weight: data.weight,
        market_price: data.market_price,
        basic_price: data.basic_price,
        cost_price: data.cost_price,
        remarks: data.remarks,
      };

      this.form = formobj;
    },
    onInput(e) {
      let { long, wide, high } = this.form;
      if (long && wide && high) {
        this.form.volume = long * wide * high;
      } else {
        this.form.volume = "";
      }
    },
    async onSave() {
      let formdata = this.form;
      let form = JSON.parse(JSON.stringify(formdata)) 
      if(form.size_code) {
          let size_code = form.size_code
          let sizecode = size_code.replace("，",",").split(',')
          form.size_code = sizecode
      }
      let filelist = this.$refs.uploadimage.uploadFiles;
      if (form.type_no && form.type_name && form.supplier_id) {
        if (filelist && filelist.length) {
          let imagearr = [];
          for (let index = 0; index < filelist.length; index++) {
            let https = filelist[index].url.substring(0, 5);
            if (https != "https") {
              let res = await uploadHomeApiupload(filelist[index].raw);
              imagearr.push(res.img);
            } else {
              imagearr.push(filelist[index].url);
            }
          }
          form.image = imagearr;
        }
        try {
          let res = await postAdminOperateSaveOrtherProduct(form);
          console.log("res",res);
          this.$message.success("保存成功");
          this.$router.go(-1);
        } catch (error) {}
      }
    },
    handleRemove(file) {
      let { filelist } = this;
      const index = filelist.findIndex((e) => e.url === file.url);
      filelist.splice(index, 1);
      this.filelist = filelist;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        type:8,
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.borderbottom {
  border-bottom: 1px solid #efefef;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.NotForSaleEdit {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  .NotForSaleEdit-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    padding-bottom: 20px;
    > div:nth-child(1) {
      width: 4px;
      height: 26px;
      border-radius: 4px;
      background: #409eff;
      margin-right: 10px;
    }
  }
  .NotForSaleEdit-one {
    .NotForSaleEdit-one-content {
      display: flex;
      flex-wrap: wrap;
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
        > .el-input {
          width: 400px;
        }
      }
    }
  }
  .NotForSaleEdit-two {
    .NotForSaleEdit-two-content {
      display: flex;
      flex-wrap: wrap;
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
        /deep/ .el-input {
          width: 400px;
        }
      }
    }
  }
}
</style>